<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.example.simpleforum.model.Forum" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<html>
<head>
    <title>发布新帖 - 极简论坛</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
    <h1>发布新帖</h1>
    <% if (request.getAttribute("error") != null) { %>
    <div class="error"><%= request.getAttribute("error") %></div>
    <% } %>
    <form action="PostAddServlet" method="post">
        <div class="form-group">
            <label for="title">标题</label>
            <input type="text" id="title" name="title" required>
        </div>
        <div class="form-group">
            <label for="forumSearch">所属板块</label>
            <div class="search-container">
                <input type="hidden" id="forumId" name="forumId" required>
                <input type="text" id="forumSearch" placeholder="输入板块名称搜索" 
                       oninput="searchForums(this.value)"
                       style="border: 1px solid #ddd; border-radius: 4px; padding: 8px; width: 100%;">
                <div id="forumResults" class="search-results"></div>
            </div>
        </div>
        
        <script>
        let currentSearch = '';
        let searchTimer = null;
        
        function searchForums(keyword) {
            // 如果关键词相同则不再搜索
            if (keyword === currentSearch) return;
            currentSearch = keyword;
            
            const resultsDiv = document.getElementById('forumResults');
            resultsDiv.innerHTML = ''; // 清空结果
            
            if (!keyword || keyword.length < 1) return;
            
            // 添加防抖，避免快速输入导致多次请求
            clearTimeout(searchTimer);
            searchTimer = setTimeout(() => {
                fetch('ForumSearchServlet?keyword=' + encodeURIComponent(keyword) + '&format=json')
                    .then(response => {
                        if (!response.ok) throw new Error('Network error');
                        return response.json();
                    })
                    .then(forums => {
                        // 确保只处理最新请求的结果
                        if (keyword !== currentSearch) return;
                        
                        if (!forums || forums.length === 0) {
                            resultsDiv.innerHTML = '<div class="no-results" style="color:#666">没有找到匹配的板块</div>';
                            return;
                        }

                        // 去重处理
                        const uniqueForums = [];
                        const seenIds = new Set();
                        
                        forums.forEach(forum => {
                            if (!seenIds.has(forum.id)) {
                                seenIds.add(forum.id);
                                uniqueForums.push(forum);
                            }
                        });

                        uniqueForums.forEach(forum => {
                            const itemDiv = document.createElement('div');
                            itemDiv.className = 'forum-item';
                            
                            const title = document.createElement('h4');
                            title.textContent = forum.name || '未命名板块';
                            title.style.color = '#333';
                            title.style.margin = '0 0 5px 0';
                            
                            const desc = document.createElement('p');
                            desc.textContent = forum.description || '暂无描述';
                            desc.style.color = '#666';
                            desc.style.margin = '0';
                            
                            itemDiv.appendChild(title);
                            itemDiv.appendChild(desc);
                            
                            itemDiv.onclick = () => {
                                document.getElementById('forumId').value = forum.id;
                                document.getElementById('forumSearch').value = forum.name || '';
                                resultsDiv.innerHTML = '';
                            };
                            
                            resultsDiv.appendChild(itemDiv);
                        });
                    })
                    .catch(error => {
                        console.error('搜索出错:', error);
                        resultsDiv.innerHTML = '<div class="no-results" style="color:red">搜索出错，请稍后再试</div>';
                    });
            }, 300); // 300毫秒延迟
        }
        </script>
        
        <style>
        .search-container {
            position: relative;
            margin-bottom: 0;
            border: none; /* 确保容器无边框 */
        }
        
        #forumSearch {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd; /* 只给输入框一个边框 */
            border-radius: 4px;
            box-sizing: border-box;
            background: #fff;
        }
        
        #forumSearch:focus {
            outline: none;
            border-color: #007bff;
        }
        
        .search-results {
            display: block;
            position: absolute;
            top: calc(100% + 5px);
            left: 0;
            right: 0;
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            z-index: 1000;
            max-height: 300px;
            overflow-y: auto;
            padding: 0; /* 移除内边距 */
            margin: 0; /* 移除外边距 */
        }
        
        #forumResults {
            border: none !important; /* 确保无额外边框 */
            outline: none !important; /* 移除轮廓 */
        }
        
        .forum-item {
            padding: 10px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            color: #333333;
            font-family: Arial, sans-serif;
            font-size: 14px;
            margin: 0;
            background: transparent; /* 确保背景透明 */
        }
        
        .forum-item h4 {
            color: #222222;
            margin: 0 0 5px 0;
            font-size: 16px;
        }
        
        .forum-item p {
            color: #555555;
            margin: 0;
            font-size: 13px;
        }
        
        .forum-item:hover {
            background: #f5f5f5;
        }
        
        .no-results {
            color: #666666 !important;
            padding: 10px;
        }
        
        .no-results {
            padding: 10px;
            color: #666;
        }
        </style>
        <div class="form-group">
            <label for="content">内容</label>
            <textarea id="content" name="content" required></textarea>
        </div>
        <div class="actions">
            <button type="submit">发布</button>
            <a href="PostListServlet" class="btn">取消</a>
        </div>
    </form>
</div>
</body>
</html>